window.onload = function() {

    var VIP = parseInt(localStorage.getItem('vip'));

    var li = document.querySelectorAll('.li'),
        imgList = document.getElementsByClassName('img');
    const ol = document.querySelectorAll('.li-o');
    const userDetail = document.getElementById('table');
    // console.log(userDetail);
    // userDetail.addEventListener('click', function(e) {
    //     e.target.onclick = function() {
    //         console.log(e.target);
    //         if(e.target.)

    //     }
    // })

    var adname = localStorage.getItem('name');
    const youname = document.querySelector('.yourname')
    youname.innerHTML = adname;


    const chaoji = document.querySelector('#chaoji');
    chaoji.className = 'color'

    //跳转效果
    for (let i = 0; i < ol.length; i++) {
        ol[i].onclick = function() {
            if (i === 0) {
                console.log(i);
                window.location.href = '后台用户列表.html'
            } else if (i === 1) {
                console.log(i);

                // window.location.href = '后台漫画详情列表.html'
            } else if (i === 2) {
                console.log(i);

                window.location.href = '后台留言.html'
            } else if (i === 3) {
                console.log(i);

                window.location.href = '管理员.html'
            }
        }
    }


    const po = document.querySelector('.abs');
    po.addEventListener('click', function(e) {
        if (e.target.id === 'pers') {
            window.location.href = 'personMan.html'
        } else if (e.target.id === 'zh') {
            console.log(e.target);
            window.location.href = '后台漫画详情列表.html'

        }
        console.log(e.target);
    })



    //点击侧边栏样式改变
    function ch() {
        for (var i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function() {
                for (var i = 0; i < li.length; i++) {
                    li[i].className = ''
                }
                this.className = 'color'
            })
        }
    }
    ch()


    //侧边栏下拉列表效果
    // console.log(imgList)
    var sum = 0;
    // console.log(li);
    const a = document.querySelectorAll('.abs>li');
    console.log(a);

    // function addEvent(obj, eventName, callback) {
    //     if (obj.addEventListener) {
    //         obj.addEventListener(eventName, callback, false)
    //     } else {
    //         obj.attachEvent("on" + eventName, function() {
    //             callback.call();
    //         })
    //     }
    // }
    // a.forEach((item, index) => {
    //     addEvent(item, 'click', function(e) {
    //         e.stopPropagation()
    //         sum++;
    //         // var h = index;
    //         if (sum % 2 !== 0) {
    //             console.log(imgList);
    //             console.log(ol);
    //             ol[index].style.overflow = 'visible';
    //             ol[index].style.height = 52 + "px";
    //             imgList[index - 1].style.transform = "rotateZ(90deg)";
    //             imgList[index - 1].style.transition = 'all 0.2s';
    //         } else {
    //             ol[index].style.overflow = 'hidden';
    //             ol[index].style.height = 0;
    //             imgList[index - 1].style.transform = 'rotateZ(0)'
    //             imgList[index - 1].style.transition = 'all 0.2s'
    //         }
    //     })
    // })
    const abs = document.querySelector('.abs');
    // console.log(ol);

    abs.addEventListener('click', function(e) {
        console.log(e.target);
    })
    for (let i = 0; i < li.length; i++) {
        li[i].onclick = function() {
            // this.className = 'color'
            sum++;
            var h = i;
            if (sum % 2 !== 0) {
                ol[h].style.overflow = 'visible';
                ol[h].style.height = 52 + "px";
                imgList[h].style.transform = "rotateZ(90deg)";
                imgList[h].style.transition = 'all 0.2s';
            } else {
                ol[h].style.overflow = 'hidden';
                ol[h].style.height = 0;
                imgList[h].style.transform = 'rotateZ(0)'
                imgList[h].style.transition = 'all 0.2s'
            }
            console.log(ol);

            ol[h].addEventListener('click', function(e) {
                console.log(1111);
                sum = 0; //让sum一直为偶数 二级菜单不隐藏
            })
            console.log(sum);
        }



    }
    // }  


    //点击汉堡图标侧边栏移动
    const hanbao = document.querySelector('.hanbao');
    const letf_nav = document.querySelector('.left-nav');
    var count = 0;
    const container = document.querySelector('.container');

    hanbao.onclick = function() {
        count++;
        if (count % 2 !== 0) {
            letf_nav.style.left = -220 + "px";
            container.style.width = 100 + '%'
            container.style.left = 0 + 'px';
            container.style.transition = 'all 0.2s'
        } else {
            letf_nav.style.left = 0 + "px";
            container.style.left = 220 + 'px'
                // container.style.left = 0 + 'px';
            container.style.transition = 'all 0.2s'
            container.style.width = 88.4 + '%'

        }
    }

    //点击修改弹出模态框
    const xiugai = document.querySelector('.xiugai')
    const model = document.querySelector('.model')
    const up = document.querySelector('.userDetail');
    const news = document.getElementsByName('g');
    var isUp = 0;
    up.addEventListener('click', function(e) {
        console.log(e.target);
        //判断修改按钮
        if (e.target.name === 'g') {

            xiugai.style.display = 'block'
            const ida = e.target.dataset.id
            console.log(ida)
            isUp = ida;
            getTail(isUp)

        }
        //判断删除按钮
        if (e.target.name === 'delete') {
            const flag = confirm('是否删除?')
            console.log()
            if (flag == true) {

                rem(e.target.id);
                console.log(e.target.id);



                console.log('你点了确认');
            } else(
                console.log('你点了取消')
            )
        }
    })

    //模态框的关闭按钮
    const guanbi = document.querySelector('.closea');
    guanbi.onclick = function() {
            console.log(1);
            xiugai.style.display = 'none'
        }
        //修改密码提交按钮
    const submit = document.querySelector('.submit')
    submit.onclick = function() {
        const newa = document.querySelectorAll('.new');
        update(isUp, newa[0].value, newa[1].value, newa[2].value);
        xiugai.style.display = 'block'
    }

    //添加按钮弹出模态框
    const look = document.querySelector('.look');
    look.addEventListener('click', function() {
        model.style.visibility = 'visible';
        isUp = 0;
    })

    //提交
    const tijiao = document.querySelector('.tijiao');
    const usn = document.querySelector('#usn');
    const ps = document.querySelector('#ps');
    const da = document.querySelector('#da')
    const phone = document.getElementById('phone');
    const email = document.getElementById('email')
    tijiao.addEventListener('click', function() {
        console.log(1);
        model.style.visibility = 'hidden';
        let usn_val = usn.value;
        let ps_val = ps.value;
        // let da_val = da.value;
        let phone_val = phone.value;
        // let email_val = email.value
        console.log(usn_val, ps_val, phone_val);
        if (isUp) {
            update(isUp, usn_val, ps_val)
        } else {
            console.log(VIP);
            addadmin(usn_val, ps_val, phone_val);
        }



    })

    console.log(model);
    //添加管理员模态框关闭按钮
    const guan = document.querySelector('.guanbi');
    guan.addEventListener('click', function() {
        console.log(1);
        model.style.visibility = 'hidden';
    })


    //搜索框

    //创建表头

    function create() {
        var trall = document.createElement('tr');
        trall.innerHTML = `<th>
ID
</th>
<th>
用户名
</th>
<th>
密码
</th>

<th>
注册时间
</th>
<th>
操作
</th>`;
        userDetail.appendChild(trall)
    }



    //退出
    const logout = document.querySelector('.logout');
    logout.onclick = function() {
        window.location.href = 'login.html'
    }


    function getList(keyname) {
        $.ajax({
            url: `http://192.168.3.184:7001/admin`,
            type: "get",
            data: {
                admin_name: keyname
            },
            headers: {
                token
            },
            success: (res) => {
                console.log(res);
                if (res.code === 0) {
                    const biaoge = document.getElementById('table');
                    console.log(biaoge);
                    biaoge.innerHTML = ''
                    create();
                    for (var i = 0; i < res.data.length; i++) {
                        // console.log(res.data[i].id);


                        // console.log(userDetail);

                        const tr = document.createElement('tr');

                        for (let data in res.data[i]) {

                            // console.log(data)

                            const td = document.createElement("td");
                            td.innerHTML = res.data[i][data]
                            tr.appendChild(td)

                            if (data == 'operate') {
                                td.innerHTML = `<button class="btn" name="delete">删除</button>
                               <button class="btn up" name="g">修改</button>`
                            }

                        }
                        const lasttd = document.createElement('td');
                        lasttd.innerHTML = `<img src='.\\imges\\de.png' class="btn" name="delete" id='${res.data[i].id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${res.data[i].id}' />`
                        tr.appendChild(lasttd)
                        tr.id = res.data[i].id;
                        userDetail.appendChild(tr);
                    }
                }

                // kan();

            }
        })
    }


    //搜索
    const ser = document.querySelector('.search-txt');

    const sbtn = document.querySelector('.search-btn')

    sbtn.onclick = function() {
        let serd = ser.value;
        console.log(serd);
        getList(serd);
    }

    const admin = document.querySelector('.admin');
    const liLis = admin.getElementsByTagName('li');
    console.log(liLis);

    const sec = document.querySelector('.section');
    sec.addEventListener('mousemove', function() {
        admin.style.top = 50 + 'px';
        admin.style.opacity = 1;
        // admin.style.zIndex = -1

    });
    let timer;
    sec.addEventListener('mouseleave', function() {

        timer = setTimeout(function() {
            admin.style.top = 800 + 'px';
            admin.style.opacity = 0;
        }, 200)

    });
    admin.addEventListener('mousemove', function() {
        clearTimeout(timer)
        admin.style.top = 50 + 'px';
        admin.style.opacity = 1;
        admin.style.zIndex = 1001

    })

    admin.addEventListener('mouseleave', function() {
        let timer;
        timer = setTimeout(function() {
            admin.style.top = 800 + 'px';
            admin.style.opacity = 0;
        })


    })


    //获取admin下的li列表
    liLis[0].onclick = function() {
        location.href = 'imgManeger.html'
    }
    liLis[1].onclick = function() {
        location.href = 'zhoubian.html'
    }
    liLis[2].onclick = function() {
        console.log(1);
        location.href = 'tuijian.html'
    }

    //修改密码
    //获取修改按钮


    const shouye = document.getElementById('shouye');
    shouye.addEventListener('click', function() {
        console.log(1);
        window.location.href = 'http://192.168.3.189:5501/layout/home_page.html'
    })


}